<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fns" uri="http://java.sun.com/jsp/jstl/functionss"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Home - BioCode</title>

</head>
<body>
<div id="main">
    <div class="">
        <form action="${host}/tools/search" style="margin: 15px 0 25px 0" id="searchForm" method="get">
            <div class="row">
                <input class="form-control" name="page" id="page" type="hidden" value="${s.page}">
                <input class="form-control" name="size" type="hidden" value="${s.size}">
                <div class="col-md-3 form-group">
                    <label>Name</label>
                    <input class="form-control" name="name" type="text" value="${s.name}">
                </div>
                <div class="col-md-3 form-group">
                    <label>Tool Type</label>
                    <select name="tool_type_id" id="tool_type_id" class="form-control select2" multiple="multiple">
                        <c:forEach items="${toolTypes}" var="item">
                            <option value="${item.id}"
                                    <c:if test="${fns:containsForArr(s.tool_type_id, item.id)}">selected="selected"</c:if>>${item.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="col-md-3 form-group">
                    <label>Teches</label>
                    <select name="tech_id" id="tech_id" class="form-control select2" multiple="multiple">
                        <c:forEach items="${teches}" var="item">
                            <option value="${item.id}"
                                    <c:if test="${fns:containsForArr(s.tech_id, item.id)}">selected="selected"</c:if>>${item.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="col-md-3 form-group">
                    <label>Platform</label>
                    <select name="platform_id" id="platform_id" class="form-control select2" multiple="multiple">
                        <c:forEach items="${platforms}" var="item">
                            <option value="${item.id}"
                                    <c:if test="${fns:containsForArr(s.platform_id, item.id)}">selected="selected"</c:if>>${item.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 form-group">
                    <label>User Interface</label>
                    <select name="user_interface_id"
                            id="user_interface_id"
                            class="form-control select2"
                            multiple="multiple">
                        <c:forEach items="${userInterfaces}" var="item">
                            <option value="${item.id}"
                                    <c:if test="${fns:containsForArr(s.user_interface_id, item.id)}">selected="selected"</c:if>>${item.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="col-md-3 form-group">
                    <label>Input Data</label>
                    <select name="input_data_type_id"
                            id="input_data_type_id"
                            class="form-control select2"
                            multiple="multiple">
                        <c:forEach items="${dataTypes}" var="item">
                            <option value="${item.id}"
                                    <c:if test="${fns:containsForArr(s.input_data_type_id, item.id)}">selected="selected"</c:if>>${item.name}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="col-md-3 form-group">
                    <label>Category</label>
                    <select name="category_id" id="category_id"
                            class="form-control select2"
                            multiple="multiple">
                        <c:forEach items="${categoryTrees}" var="categoryTree">
                            <optgroup label="${categoryTree.root.name}">


                                <c:forEach items="${categoryTree.leaves}" var="category">
                                    <option value="${category.id}"
                                            <c:if test="${fns:containsForArr(s.category_id,category.id)}">selected="selected"</c:if>>${category.name}</option>

                                </c:forEach>
                            </optgroup>
                        </c:forEach>

                    </select>
                </div>
            </div>
            <button class="btn-primary btn" type="submit" id="searchBtn">Search</button>
        </form>
        <hr>
        <ul id="pagination" class="pagination-sm"></ul>
        <ul class="rich-list">
            <c:forEach items="${tools}" var="t">
                <li>
                    <h4 style="margin-bottom: 0">
                        <a href="${host}/tools/${t.id}/show">${t.name}</a>
                        <small>${t.desc}</small>
                    </h4>
                    <div class="meta"><span>Categories <c:forEach items="${t.categories}" var="item" varStatus="index">
                        <a href="${host}/categories/${item.id}">${item.name}</a>
                        <c:if test="${index.last==false}">,</c:if>
                    </c:forEach> </span>
                        <span>Tool Type: <a
                                href="${host}/tools/search?tool_type_id=${t.toolType.id}">${t.toolType.name}</a></span>
                        <span>Technologies:
                            <c:forEach items="${t.teches}" var="item" varStatus="index">
                                <a href="${host}/tools/search?tech_id=24">${item.name}</a>
                                <c:if test="${index.last==false}">,</c:if>
                            </c:forEach></span>
                        <span>Download Count: ${fns:calToolDownloadCount(t.id)}</span>
                    </div>
                </li>
            </c:forEach>
        </ul>


    </div>
</div>
<script>

    /* $("#searchBtn").click(function (event) {
         event.preventDefault();
         console.log($("form").serialize());


     })*/
    $(document).ready(function () {
        var currentPage =$("#page").val()?$("#page").val():1;
        var size =$("#size").val()?$("#size").val():10;


        var totalPages =${totalPages};
        if(totalPages>0){
        $('#pagination').pagination({
            items:totalPages,
            itemOnPage: size,
            currentPage: currentPage,
            cssStyle: 'light-theme',
        /*    prevText: '<span aria-hidden="true">&laquo;</span>',
            nextText: '<span aria-hidden="true">&raquo;</span>',*/
            onInit: function () {
                // fire first page loading
            },
            onPageClick: function (page, evt) {
                // some code
                $("#page").val(page);
                $("#searchForm").submit();
            }
        });
        }
    });
</script>
</body>

</html>
